<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/mobile-header.jsp"%>

<!-- app_new3_exhibit -->
<html class="ui-mobile">
<head>
<script type="text/javascript">
	if (is_weixin()) {
		var url = location.href
		if (url.indexOf("MediaApp/lottery/") > 0) {

		} else {
			if (url.indexOf(".qq.com") < 1 && url.indexOf("_qq_com") < 1) {
				if (url.indexOf("?") < 1) {
					location.href = url + "?.qq.com"
				} else {
					location.href = url + "&.qq.com"
				}
			}
		}
	}
	function is_weixin() {
		var ua = navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == "micromessenger") {
			return true;
		} else {
			return false;
		}
	}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>${prodect.name }</title>
<script type="text/javascript" src="${ctxStatic }/site/themes/CanYinFuWu/jquery.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/site/themes/CanYinFuWu/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/site/themes/CanYinFuWu/jquery.slide-packer.js"></script>
<script type="text/javascript" src="${ctxStatic }/site/themes/CanYinFuWu/img_popup.js"></script>
<link rel="stylesheet" type="text/css" href="${ctxStatic }/site/themes/CanYinFuWu/jquery.mobile-1.3.0.css" />
<link rel="stylesheet" type="text/css" href="${ctxStatic }/site/themes/CanYinFuWu/style.css" />
<style>
#menu_list li {
	padding: 0;
	border-bottom: 1px solid #333;
	border-top: 1px solid #777;
	height: 50px
}

#menu_list li a {
	font-weight: bold;
	padding: 10px 0;
	line-height: 50px;
	font-size: 17px
}

#menu_list li a:hover div {
	background: #AC0001
}
		.autocut{
	  width:130px;  
	  overflow:hidden;  
	  white-space:nowrap;  
	  text-overflow:ellipsis;  
	  -o-text-overflow:ellipsis;  
	  -icab-text-overflow: ellipsis;  
	  -khtml-text-overflow: ellipsis;  
	  -moz-text-overflow: ellipsis;  
	  -webkit-text-overflow: ellipsis; 
	  
	  }
</style>
</head>
<body data-theme="lb">
	<!-- /page -->
	<div data-role="page" id="main-page" data-title="${project.name }"
		data-url="demo-page" tabindex="0" data-theme="p"
		style="min-height: 316px;">
		<div data-role='header' data-theme="r" id='header'>
			<div
				style='position: absolute; top: 0px; left: 0px; z-index: 10; height: 42px; padding-top: 8px; padding-left: 7px; width: 50px; border-right: 2px solid #A31114'>
				<a href='' data-rel='back'><img
					src="${ctxStatic}/site/themes/CanYinFuWu/images/back.png"
					alt="" /></a>
			</div>
			<h3>微会员专区</h3>
			<div
				style='width: 130px; position: absolute; top: 5px; right: 5px; z-index: 10'>

				<a href="javascript:menu()"
					style='display: inline-block; width: 67px; height: 37px; background: url(/theme/app_new3_exhibit/img/btn-cd.png); text-align: center; color: #fff; text-decoration: none; font-size: 18px; margin-left: 57px'><span
					style='line-height: 37px;'>菜单</span></a>
				<div style='display: none; text-align: center;' id='menu'>

					<div class='triangle'></div>
					<div
						style='background-color: rgba(50, 50, 50, 0.9); border-radius: 5px; box-shadow: 0 0 3px #333;'>

						<ul id='menu_list'>
							<li><a href='${ctxMobileSite }/${project.id}?menuId=1'><div>首 页</div></a></li>

							<li><a href='${ctxMobileSite }/${project.id}?menuId=2'><div>微会员专区</div></a></li>

							<li><a href='${ctxMobileSite }/${project.id}?menuId=3'><div>新闻动态</div></a></li>
							<c:forEach items="${microPages }" var="microPage">
							<li><a class="ui-link" href="${ctxMobileSite }/viewPage/${microPage.id }"><div class="autocut">${microPage.name }</div></a></li>	
							</c:forEach>
						</ul>
					</div>
				</div>
				<script>
					function menu() {
						$('#menu').toggle()
					}
				</script>
			</div>
		</div>
		<!-- /header -->


		<div data-role="content" class="ui-content" role="main">

			<div class="sub-container">
				<div><img src="${ctxStatic}/site/themes/CanYinFuWu/images/cpzs.png" alt="" /><span class='show_title'>微会员专区</span></div>
				<div class='title_divi'></div>

				<div class="ui-grid-a" id="product">
						<!-- 实际套餐列表 -->
						<c:forEach items="${microProductList }" var="product">
							<div class="ui-block-b" style="">
								<div class="product-bg" style="display:inline-block">
									<a class="ui-link" href="${ctxMobileSite }/viewProduct/${product.id }" title=""><img class="goods-pic" src="${ctxUser}/product/${product.indexPic}" alt=""></a>
									<p class="goods-title">${product.name }</p>
								</div>
							</div>
						</c:forEach>
					</div>
			
			</div>

			<script>
				var mySwiper = new Swiper('.swiper-container', {
					pagination : '.pagination',
					autoplay : 3000,
					loop : true,
					grabCursor : true,
					paginationClickable : true,
				})
			</script>
		</div>
		<!-- /content -->

	</div>
	<!-- /page -->
	<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
		<span class="ui-icon ui-icon-loading"></span>
		<h1>loading</h1>
	</div>




	<script type="text/javascript">
		//关闭全局ajax
		$(document).bind("pageinit", function() {
			$.mobile.ajaxEnabled = false;
		});
	</script>
</body>
<script type="text/javascript">
	try {

		window.onunload = stay;
		window.onload = function() {
			autoSize();
			slider_size();
		}

		pageOpen = new Date();//定义一个新的日期对象，记录开始浏览页面时间。  
		function stay() {//定义一个函数。  
			pageClose = new Date();//定义一个新的日期对象，记录结束浏览页面时间。  
			minutes = (pageClose.getMinutes() - pageOpen.getMinutes()); //“分钟”变量等于结束时间的分钟数减去开始时间的分钟数。  
			seconds = (pageClose.getSeconds() - pageOpen.getSeconds());//“秒数”变量等于结束时间的秒数数减去开始时间的秒数数。  
			time = (seconds + (minutes * 60));//时间变量等于“秒数”变量加上“分钟”变量乘以60，即变为以秒记
			send_time(time);
			return time;
		}
		function send_time(time) {
			var media_ad_id = '116077';
			var action = 'product';

			var url = '/MediaApp/send_duration';
			url = url + '?media_ad_id=' + media_ad_id + '&action=' + action
					+ '&duration=' + time;
			var i = new Image(1, 1);
			i.src = url;
		}

		function autoSize() {
			$("img,iframe,embed").each(
					function() {
						if ($(this).width() > $(this).parent().width()
								|| $(this).width() > $(window).width()) {
							$(this).css('max-width', "100%");
						}
					});
			$("iframe").each(function() {
				var _width = $(this).width();
				if (_width) {
					$(this).css('height', _width);
				}
			})
		}

		// 图片跳转放大
		$(".ui-content img").click(function() {
			if (!$(this).parent().attr('href')) {
				window.location.href = $(this).attr('src');
			}
		});

		//约束轮播图片的比例
		function slider_size() {
			var slider_height = 0;
			slider_height = $(".slider .switchable-box").width() * 0.75;
			$(".slider .switchable-box").height(slider_height);
			$(".slider .switchable-content img").height(slider_height);
		}

	} catch (e) {

	}
</script>
</html>